<template>
  <div class="mb-12">
    <div v-if="activeExperts?.length" class="mb-8 recommend-section">
      <div class="recommend-title flex items-center gap-2 mb-4">
        <span class="font-bold text-xl text-blue-800">活跃专家</span>
        <div class="h-2 w-2 rounded-full bg-gradient-to-r from-blue-400 to-blue-600"></div>
        <div class="flex-1 h-px bg-gradient-to-r from-blue-200 to-transparent"></div>
      </div>
      <div class="recommend-card-row flex overflow-x-auto scrollbar-thin scrollbar-thumb-blue-200">
        <ExpertCard
          v-for="expert in activeExperts"
          :key="expert.id"
          :expert="expert"
          :tag-color="tagColor"
          :show-actions="false"
          @click="$emit('card-click', expert)"
        />
      </div>
    </div>
    <div v-if="newExperts?.length" class="mb-8 recommend-section">
      <div class="recommend-title flex items-center gap-2 mb-4">
        <span class="font-bold text-xl text-blue-800">新入驻专家</span>
        <div class="h-2 w-2 rounded-full bg-gradient-to-r from-green-400 to-blue-400"></div>
        <div class="flex-1 h-px bg-gradient-to-r from-green-200 to-transparent"></div>
      </div>
      <div class="recommend-card-row flex overflow-x-auto scrollbar-thin scrollbar-thumb-blue-200">
        <ExpertCard
          v-for="expert in newExperts"
          :key="expert.id"
          :expert="expert"
          :tag-color="tagColor"
          :show-actions="false"
          @click="$emit('card-click', expert)"
        />
      </div>
    </div>
    <div v-if="topExperts?.length" class="recommend-section">
      <div class="recommend-title flex items-center gap-2 mb-4">
        <span class="font-bold text-xl text-blue-800">高评分专家</span>
        <div class="h-2 w-2 rounded-full bg-gradient-to-r from-yellow-400 to-pink-400"></div>
        <div class="flex-1 h-px bg-gradient-to-r from-yellow-200 to-transparent"></div>
      </div>
      <div class="recommend-card-row flex overflow-x-auto scrollbar-thin scrollbar-thumb-blue-200">
        <ExpertCard
          v-for="expert in topExperts"
          :key="expert.id"
          :expert="expert"
          :tag-color="tagColor"
          :show-actions="false"
          @click="$emit('card-click', expert)"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import ExpertCard from './ExpertCard.vue'
const props = defineProps({
  activeExperts: Array,
  newExperts: Array,
  topExperts: Array,
  tagColor: Function,
})
</script>
<style scoped>
.recommend-section {
  background: linear-gradient(135deg, #fafdff 0%, #f2f6fc 100%);
  border-radius: 2.5rem;
  box-shadow: 0 4px 24px rgba(56,112,255,0.10);
  padding: 2.2rem 2rem 2rem 2rem;
  margin-bottom: 2.5rem;
}
.recommend-title {
  padding-left: 0.2rem;
  padding-bottom: 0.2rem;
}
.recommend-card-row {
  overflow-x: auto;
  overflow-y: visible;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.recommend-card-row > *:not(:last-child) {
  margin-right: 2rem;
}
@media (max-width: 900px) {
  .recommend-section {
    padding: 1.2rem 0.5rem 1rem 0.5rem;
    border-radius: 1.2rem;
  }
  .recommend-card-row > *:not(:last-child) {
    margin-right: 1.5rem;
  }
  .recommend-card-row {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}
/* 优化卡片hover缩放，防止溢出过多 */
.recommend-card-row .expert-card {
  transition: box-shadow 0.2s, border 0.2s, transform 0.2s;
}
.recommend-card-row .expert-card:hover {
  transform: translateY(-4px) scale(1.025);
  box-shadow: 0 8px 32px rgba(56,112,255,0.18);
  border-color: #4f9cff;
}
</style> 